<!--  -->
<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/updatePassword' }">
        修改密码
      </el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>修改密码</span>

        <el-form
          ref="loginFormRef"
          :rules="loginRules"
          :model="loginForm"
          class="login_form"
          label-width="80px"
        >
          <el-form-item label="用户名" prop="username">
            <!-- 直接使用这个框架里面的icon -->
            <!-- <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user-solid"
              ></el-input> -->

            <el-input :placeholder="username" :disabled="true"></el-input>
          </el-form-item>

          <el-form-item label="原密码" prop="oldpassword">
            <!-- 直接使用这个框架里面的icon -->
            <!-- <el-input
                v-model="loginForm.username"
                prefix-icon="el-icon-user-solid"
              ></el-input> -->

            <el-input
              v-model="loginForm.oldpassword"
              type="password"
            ></el-input>
          </el-form-item>

          <el-form-item label="再一次" prop="repassword">
            <el-input v-model="loginForm.repassword" type="password"></el-input>
            <!-- <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-search"
              ></el-input> -->
          </el-form-item>

          <el-form-item label="新密码" prop="newpassword">
            <el-input
              v-model="loginForm.newpassword"
              type="password"
            ></el-input>
            <!-- <el-input
                v-model="loginForm.password"
                prefix-icon="el-icon-search"
              ></el-input> -->
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="handleLogin">提交</el-button>
            <el-button type="success" @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "UpdatePassword",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.loginForm.oldpassword !== "") {
          this.$refs.loginFormRef.validateField("repassword");
        }
        callback();
      }
    };

    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.loginForm.oldpassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      username: "",
      loginForm: {
        username: "",
        oldpassword: "",
        repassword: "",
        newpassword: "",
      },
      loginRules: {
        oldpassword: [
          { validator: validatePass, trigger: "blur" },
          { required: true, message: "请输入原来的密码" },
        ],
        repassword: [
          { validator: validatePass2, trigger: "blur" },
          { required: true, message: "请输入原来的密码" },
        ],
        newpassword: [
          { required: true, message: "请输入新的密码名称", trigger: "blur" },
          {
            min: 5,
            max: 11,
            message: "长度在 5 到 11 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.username = JSON.parse(window.sessionStorage.getItem("user")).name;
  },
  methods: {
    handleLogin() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (valid) {
          //如果验证成功
          //首相在这个地方，返回的是一个对象，而且这个地想里面含有很多数据，
          //在这个地方主要使用的就是这个解析的语法，在这个地方就可以很好的使用这个语法了，然后就可以很好的之后的访问了
          const { data: res } = await this.$http.post(          //请求更改密码
            "user/updatePassword?username=" +
              this.username +
              "&oldpassword=" +
              this.loginForm.oldpassword +
              "&newpassword=" +
              this.loginForm.newpassword
          );

          //然后在这个地方是进行处理这个登录的，然后就可以很好的进行这个之后的操作。
          if (res == "200") {
            this.$message.success("修改密码成功！"); //信息提示
            window.sessionStorage.clear();
            this.$router.push("login");
          } else {
            this.$message.success("修改失败失败！"); //信息的提示
          }
        } else {
          //如果失败
          return;
        }
      });
    },
    handleReset() {
      this.$refs.loginFormRef.resetFields();
    },
  },
};
</script>

<style lang="less"  scoped>
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 480px;
}
</style>
